<template>
  <div class="hello">
    <h1 ref="root">{{ msg }}</h1>
    {{ state.count }} double is {{ double }}
    <input type="button" value="+" @click="inc" />
  </div>
</template>

<script>
import { ref, reactive, computed, watch,onMounted } from 'vue'
import { release } from 'os'
import { log } from 'util'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    let state = reactive({
      count: 0
    })
    let double = computed(() => state.count * 2)
    watch(
      () => state.count,
      value => {
        console.log('count changed')
      }
    )
    let inc = () => {
      state.count++
    }
    let root = ref(null)
    onMounted(()=>{
      let dom = root.value
      dom.style.color = 'blue'
    })
    return { state,double,inc,root }
  }
}
</script>
